<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="static/assets/css/amazeui.min.css" />
<link rel="stylesheet"
	href="static/assets/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="static/assets/css/app.css">

</head>
<body    style="background-image: url(static/img/reg_bg.jpg);background-size:cover;background-repeat: no-repeat; backbackground-attachment: fixed;">
	<script src="static/assets/js/theme.js"></script>
	<div class="am-g tpl-g">
		<!-- 风格切换 -->
		<div class="tpl-login">
			<div class="tpl-login-content">
				<div class="tpl-login-title">注册用户</div>
				<span class="tpl-login-content-info"> 创建一个新的用户 </span>
				<form class="am-form tpl-form-line-form" method="post"
					action="/bookManager/reg">
					<div class="am-form-group">
						<input type="text" class="tpl-form-input" id="user-name"
							name="username" required="required" placeholder="请输入账号">
					</div>
					<div class="am-form-group">
						<input type="password" class="tpl-form-input" id="user-name"
							name="password" required="required" placeholder="请输入密码">
					</div>
					<div class="am-form-group">
						<input type="text" class="tpl-form-input" id="user-name"
							name="name" required="required" placeholder="请输入姓名">
					</div>
					<div class="am-form-group">
						<input type="text" class="tpl-form-input" id="user-email"
							name="email" onblur="checkEmail()" required="required" placeholder="请输入邮箱">
					</div>
					<div class="am-form-group">
						<input type="text" class="tpl-form-input" id="user-phone"
							name="phone" required="required" onblur="validatePhoneNumber()" placeholder="请输入手机号">
					</div>
					<div class="am-form-group">
						<button type="submit"
							class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>
					</div>
					<div class="am-form-group">
						<button type="button" onclick="location.href='/bookManager/login.jsp';"
							class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">返回登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
	  function checkEmail(){
		  var email = document.getElementById("user-email").value;
		  console.log(email.value);
		  var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
		  if (emailRegex.test(email)) {
			  
		      console.log("邮箱格式正确");
		  } else {
			  alert("邮箱格式不正确");
		      console.log("邮箱格式不正确");
		  }
	  }
	  function validatePhoneNumber() {
          // 获取输入的手机号码
          var phoneNumber = document.getElementById("user-phone").value;

          // 定义手机号码的正则表达式
          var phoneRegex =/^(\+?\d{1,3}[-\s]?)?\d{11}$/;

          // 验证手机号码是否符合正则表达式
          if (phoneRegex.test(phoneNumber)) {
              alert("手机号验证通过！");
              return true; // 表单提交
          } else {
              alert("请输入有效的手机号！");
              return false; // 阻止表单提交
          }
      }
	</script>
	<%--<script src="http://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>--%>
	<script src="static/assets/js/app.js"></script>

</body>

</html>
